import React, { Component } from "react";
import { Radio } from "antd";
import "./ShowSingleChoice.less";

const { Group } = Radio;
class Index extends Component {

    constructor(props) {
        super(props);
        this.state = {
            stuAnswer: ""
        };
        this.createQuestion = this.createQuestion.bind(this)
        this.createOption = this.createOption.bind(this)
        this.createTrueAnswer = this.createTrueAnswer.bind(this)
        this.createStudentAnswer = this.createStudentAnswer.bind(this)
    }

    createQuestion() {
        return <div className="row">
            <div className="col label">
                <span>{this.props.index}.</span>
            </div>
            <div className="col context">
                <span>(单选题 {this.props.score || 0}分) </span>
                <span>{this.props.question}</span>
                <span> ( )</span>
            </div>
        </div>
    }

    createOption() {
        return <div className="row">
            <div className="col label"></div>
            <div className="col context">
                <Group onChange={(e) => {
                    this.setState({
                        stuAnswer: e.target.value
                    }, () => {
                        this.props.onChange(this.state.stuAnswer)
                    })
                }}>
                    {this.props.options?.map?.((option, index) => {
                        const label = String.fromCharCode(65 + index)
                        return <Radio value={label} className='option' key={label}>
                            <span>{label}.</span>
                            <span>{option}</span>
                        </Radio>
                    })}
                </Group>
            </div>
        </div>
    }

    createTrueAnswer() {
        return <div className="row">
            <div className="col label true-answer">
                <span>参考答案：</span>
            </div>
            <div className="col context">
                <span>{this.props.trueAnswer}</span>
            </div>
        </div>
    }

    createStudentAnswer() {
        const style = {}
        const { trueAnswer, studentAnswer } = this.props
        if (trueAnswer?.toString?.() === studentAnswer?.toString?.()) {
            style.color = '#52c41a'
        } else {
            style.color = '#f5222d'
        }
        return <div className="row">
            <div className="col label true-answer">
                <span>学生答案：</span>
            </div>
            <div className="col context" style={style}>
                <span>{studentAnswer}</span>
            </div>
        </div>
    }

    render() {
        const { showTrueAnswer, showStudentAnswer } = this.props
        return (
            <div className={`show-single-choice ${this.props.className}`}>
                {this.createQuestion()}
                {this.createOption()}

                {showTrueAnswer ? this.createTrueAnswer() : null}
                {showStudentAnswer ? this.createStudentAnswer() : null}
            </div>
        );
    }
}

export default Index;
